<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link href="//unpkg.com/layui@2.8.18/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-form">
  <div class="layui-form-item">
    <input type="checkbox" name="agreement" value="1" title="是否同意" lay-filter="demo-checkbox-filter">
  </div>
  <div class="layui-form-item">
    <button class="layui-btn" lay-submit lay-filter="demo-checkbox-submit">确认</button>
  </div>
</div>

  <div class="layui-form-item">
    <input type="checkbox" name="AAA" value="0">
    <div lay-checkbox>
      自定义<a href="#target-url"><ins>标题模板</ins></a>
    </div>
  </div>
  <div class="layui-form-item">
    <input type="checkbox" name="BBB" value="1" lay-skin="tag">
    <div lay-checkbox>
      <i class="layui-icon layui-icon-heart" style="position: relative; top: 1px; line-height: normal;"></i> 标题模板
    </div>
  </div>
  <div class="layui-form-item">
    <input type="checkbox" name="CCC" value="2" lay-skin="switch">
    <div lay-checkbox>
      <i class="layui-icon layui-icon-moon"></i> | 
      <i class="layui-icon layui-icon-light"></i>
    </div>
  </div>
</div>
  
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.8.18/dist/layui.js"></script> 
<script>
layui.use(function(){
  var form = layui.form;
  var layer = layui.layer;
  // checkbox 事件
  form.on('checkbox(demo-checkbox-filter)', function(data){
    var elem = data.elem; // 获得 checkbox 原始 DOM 对象
    var checked = elem.checked; // 获得 checkbox 选中状态
    var value = elem.value; // 获得 checkbox 值
    var othis = data.othis; // 获得 checkbox 元素被替换后的 jQuery 对象
    
    layer.msg('checked 状态: '+ elem.checked);
  });
  // 通过表单提交事件，演示 checkbox 不同状态下的字段结果
  form.on('submit(demo-checkbox-submit)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
});
</script>
 
</body>
</html>